<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>徐先根9.29作业</title>
    <link rel="stylesheet" href="./css/作业.css">
</head>

<body>
    <!-- 背景图 -->
    <div class="bjt">
        <!-- 上中 -->
        <header>
            <!-- logo -->
            <img src="./images/logo.png" id="logo">
            <!-- 导航 -->
            <div class="dh1">
                <p>HOME</p>
                <p>NEWS</p>
                <p>SERVICES</p>
                <p>PRODUCTS</p>
                <p>CONTRACTS</p>
            </div>
            <!-- 导航 -->
            <div class="dh2">
                <p>Welcome!</p>
                <p>FRESH</p>
                <p>FORYOU</p>
                <p>THEBEST</p>
                <p>OURADDRESS</p>
            </div>
            <!-- 导航图片 -->
            <div class="dhtp">
                <img src="./images/menu_icon1_active.gif">
                <img src="./images/menu_icon2.gif">
                <img src="./images/menu_icon3.gif">
                <img src="./images/menu_icon4.gif">
                <img src="./images/menu_icon5.gif">
            </div>
            <!-- 滚动图片 -->
            <section>
                <div class="gd">
                    <div class="donghua">
                        <div class="gdtp">
                            <img src="./images/img1.jpg">
                            <img src="./images/img2.jpg">
                            <img src="./images/img3.jpg">
                            <img src="./images/img4.jpg">
                        </div>
                    </div>
                </div>
            </section>
            <aside>
                <!-- 上半文字 -->
                <div class="dhz">
                    <div class="plan1">
                        <div class="flex">
                            <div class="tp">
                                <p>A</p>
                            </div>
                            <div class="tpr">
                                <h2>Business Planning</h2>
                            </div>
                        </div>
                        <div class="wenzi">
                            <p>This <ins>website template</ins>
                                pages: Home, News,Services,
                                Products, Contacts(contact form
                                doesn't work).
                            </p>
                            <a href="">Read More</a>
                        </div>
                    </div>
                    <div class="plan1">
                        <div class="flex">
                            <div class="tp">
                                <p>B</p>
                            </div>
                            <div class="tpr">
                                <h2>Business Planning</h2>
                            </div>
                        </div>
                        <div class="wenzi">
                            <p>This <ins>website template</ins>
                                pages: Home, News,Services,
                                Products, Contacts(contact form
                                doesn't work).
                            </p>
                            <a href="">Read More</a>
                        </div>
                    </div>
                    <div class="plan1">
                        <div class="flex">
                            <div class="tp">
                                <p>C</p>
                            </div>
                            <div class="tpr">
                                <h2>Business Planning</h2>
                            </div>
                        </div>
                        <div class="wenzi">
                            <p>This <ins>website template</ins>
                                pages: Home, News,Services,
                                Products, Contacts(contact form
                                doesn't work).
                            </p>
                            <a href="">Read More</a>
                        </div>
                    </div>
                    <div class="plan1">
                        <div class="flex">
                            <div class="tp">
                                <p>D</p>
                            </div>
                            <div class="tpr">
                                <h2>Business Planning</h2>
                            </div>
                        </div>
                        <div class="wenzi">
                            <p>This <ins>website template</ins>
                                pages: Home, News,Services,
                                Products, Contacts(contact form
                                doesn't work).
                            </p>
                            <a href="">Read More</a>
                        </div>
                    </div>
                </div>
                <article>
                    <!-- 下半文字 -->
                    <div class="wel">
                        <!-- 标题 -->
                        <div class="zuo">
                            <h2>Welcome dear Visitor</h2>
                        </div>
                        <!-- 男人图片 -->
                        <div class="ztp">
                            <!-- 图片 -->
                            <img src="./images/page1_img1.jpg">
                            <!-- 文字 -->
                            <div class="list">
                                <p>At vero eos et accusamus et iusto
                                    odio dignissimos ducimus quiblanditiis
                                    praesentium voluptatum deleniti atque
                                    corrupti quosdolores et quas molestias
                                    excepturi sint occaecati cupiditate
                                    nonprovident,similique sunt in culpa.
                                </p>
                                <p>Et harum quidem rerum facilis est et
                                    expedita distinctio. Namlibero tempore
                                    , cum soluta nobis est eligendi optio
                                    cumque nihilimpedit quo minus id quod
                                    maxime placeat facere possimus,omnis
                                    voluptas assumenda est, omnis dolor
                                    repellendus.
                                </p>
                            </div>
                        </div>
                    </div>
                    <!-- 右下部分 -->
                    <div class="xiayou">
                        <h2>Testimonials</h2>
                        <!-- 介绍 -->
                        <div class="letter">
                            <p>"Nam libero tempore,cum
                                soluta nobis eligendiquo
                                minus quod maximeplaceat
                                facere"
                            </p>
                        </div>
                        <div class="xiayouj"></div>
                        <h2>James Coloway</h2>
                        <span>Director</span>
                        <!-- 上箭头 -->
                        <div class="sjt">
                            <img src="./images/marker_up.gif" alt="">
                        </div>
                        <!-- 下箭头 -->
                        <div class="xjt">
                            <img src="./images/marker_down.gif" alt="">
                        </div>
                    </div>
                </article>
            </aside> 
        </header>
        <!-- 最下部分 -->
        <footer>
            <!-- 最下文字 -->
            <div class="zuixia">
                <div class="why">
                    <h2>Why Us?</h2>
                    <p>> Lorem ipsum dolor sit
                    </p>
                    <p>> Lorem ipsum dolor sit
                    </p>
                    <p>> Lorem ipsum dolor sit
                    </p>
                    <p>> Lorem ipsum dolor sit
                    </p>
                </div>
                <div class="why">
                    <h2>Why Us?</h2>
                    <p>> Lorem ipsum dolor sit
                    </p>
                    <p>> Lorem ipsum dolor sit
                    </p>
                    <p>> Lorem ipsum dolor sit
                    </p>
                    <p>> Lorem ipsum dolor sit
                    </p>
                </div>
                <div class="why">
                    <h2>Why Us?</h2>
                    <p>> Lorem ipsum dolor sit
                    </p>
                    <p>> Lorem ipsum dolor sit
                    </p>
                    <p>> Lorem ipsum dolor sit
                    </p>
                    <p>> Lorem ipsum dolor sit
                    </p>
                </div>
                <div class="news">
                    <h2>Newsletter</h2>
                    <input type="text">
                    <p>Type Your Email Here</p>
                    <div class="sub">
                        <span>Subscribe</span>
                    </div>
                </div>
            </div>
            <!-- 最下 -->
            <div class="mod">
                <p><ins>Website Template</ins>by TemplateMonster.com</p>
                <p><ins>3D Models</ins>provided by Templates.com</p>
            </div>
        </footer>
    </div>
</body>

</html>